<template>
  <div>
    <el-form ref="loginForm" :model="form" :rules="rules" label-width="80px" class="login-box">
      <h3 class="login-title">欢迎登录</h3>
      <el-form-item label="用户名" prop="username">
        <el-input type="text" placeholder="请输入账号" v-model="form.username"/>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" placeholder="请输入密码" v-model="form.password"/>
      </el-form-item>
      <el-form-item label="验证码" prop="code">
        <el-input type="text" placeholder="请输入验证码" v-model="form.code" />
<!--                <img src="http://localhost:8000/captcha" alt="captcha">-->
      </el-form-item>
      <el-form-item>
        <el-button type="primary" round @click="login">登录</el-button>
        <el-button type="primary" round @click="gotoRegister">注册</el-button>
      </el-form-item>
    </el-form>
    <!--    <el-dialog-->
    <!--      title="温馨提示"-->
    <!--      :visible.sync="dialogVisible"-->
    <!--      width="30%"-->
    <!--      :before-close="handleClose">-->
    <!--      <span>请输入账号和密码</span>-->
    <!--      <span slot="footer" class="dialog-footer">-->
    <!--<el-button type="primary" @click="onSubmit()">确 定</el-button>-->
    <!--</span>-->
    <!--    </el-dialog>-->
  </div>
</template>
<script>
  export default {
    data() {
      return {
        form: {
          username: '',
          password: '',
          code: ''
        },
        //表单验证，需要再el-form-item 元素中增加prop属性
        rules: {
          username: [
            {required: true, message: '账号不能为空', trigger: 'blur'}
          ],
          password: [
            {required: true, message: '密码不能为空', trigger: 'blur'}
          ],
          code: [
            {required: true, message: '验证码不能为空', trigger: 'blur'}
          ]
        },
        //对话框显示和隐藏
        // dialogVisible: false
      }
    },
    methods: {
      // 异步登录
      async login() {
        const {data: key} = await this.$http.get("getKey");
        let encrypt = new JSEncrypt();
        encrypt.setPublicKey(key);
        // encrypted为加密后的密码
        let encrypted = encrypt.encrypt(this.form.password);
        this.axios({
          method: 'post',
          url: 'login',
          data: ({
            username: this.form.username,
            password: encrypted,
            code: this.form.code
          }),
        }).then((res) => {
          if (res.data.code == 200){
            this.$message.success("登录成功！");
            sessionStorage.setItem('username',this.form.username);
            const {data: role} = this.$http.get("getRole/" + this.form.username).then((role) => {
              sessionStorage.setItem("role",role.data);
            });
            this.$router.push({name: 'Main'});
            // this.getUserInfo();
          }if (res.data.code == 201){
            this.$message.error("输入信息有误，登录失败");
          }if (res.data.code == 199){
            this.$message.error("用户名不存在，请重新输入。");
          }if (res.data.code == 100){
            this.$message.error("对不起，该用户已被禁用。");
          }
        })
      },
      gotoRegister(){
        this.$router.replace('/register');
      }
    }
  }
</script>
<style lang="scss" scoped>
  .login-box {
    border: 1px solid #DCDFE6;
    width: 350px;
    margin: 180px auto;
    padding: 35px 35px 15px 35px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    box-shadow: 0 0 25px #909399;
  }

  .login-title {
    text-align: center;
    margin: 0 auto 40px auto;
    color: #303133;
  }
</style>
